<template>
	<view class="factory">
		<view class="maxBox">
			<picker mode="date" start="1970-01-01" @change="changeBirth">
				<view class="box disFlex scale-1px-bottom ">
					<view class="word">招标截至时间</view>
					<view class="cont next paddingRight15">{{updata.deadline}}</view>
				</view>
			</picker>
			<view class="box disFlex  scale-1px-bottom" @tap="choose">
				<view class="leftWord">展位所在城市</view>
				<view class="next rightWord">{{city}}</view>
			</view>
			<view class="box disFlex  scale-1px-bottom" @tap="choosehy">
				<view class="leftWord">参展展会</view>
				<view class="next rightWord">{{hyname}}</view>
			</view>
			<view class="box disFlex  scale-1px-bottom">
				<view class="leftWord">展位面积</view>
				<input style="text-align: right;" type="text" v-model="updata.acreage" placeholder="输入展位面积" />
			</view>
			<view class="box disFlex  scale-1px-bottom">
				<view class="leftWord">预算</view>
				<input style="text-align: right;" type="text" v-model="updata.cost" placeholder="输入预算金额" />
			</view>
			<view class="box disFlex  scale-1px-bottom" @tap="chooseopen">
				<view class="leftWord">开口方向</view>
				<view class="next rightWord">{{openname}}</view>
			</view>
		</view>
		<view class="box10 ">
			<view class="rbox">
				<view class="title">技能与需求说明</view>
				<textarea value="" v-model="updata.content" placeholder="输入您的招标内容" />
				<view class="imgCount">插入图片（{{imgs.length}}/9）</view>
				<view class="imgs">
					<view class="pic" v-for="(val,i) in imgs" :key='i'>
						<image :src="val" mode=""></image>
						<image class="del" src="../../../static/img/col.png" mode="" @tap="del(i)"></image>
					</view>
					<view class="camera" v-if="imgs.length<9">
						<image src="../../../static/img/camera.png"  @tap="chooseImg" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="box10 ">
			<view class="maxBox">
				<view class="box disFlex  scale-1px-bottom" >
					<view class="leftWord">联系人</view>
					<input style="text-align: right;" type="text" v-model="updata.name" placeholder="输入联系人姓名"/>
				</view>
				<view class="box disFlex  scale-1px-bottom" >
					<view class="leftWord">微信号</view>
					<input style="text-align: right;" type="text" v-model="updata.wx_number" placeholder="输入微信号"/>
				</view>
				<view class="box disFlex  scale-1px-bottom" >
					<view class="leftWord">电话号码</view>
					<input style="text-align: right;" type="text" v-model="updata.phone" placeholder="输入电话号码"/>
				</view>
			</view>
		</view>
		
		<view class="bottom">
			<button @tap="uprelease">发布</button>
		</view>
		<!-- 选择地址 -->
		<view class="bgs" v-if="popDateStatus">
			<view class="sexPop">
				<view class="disFlex title">
					<text class="cansel" @tap="closeDatePop()">取消</text>
					<text class="word">选择地址</text>
					<text class="sure" @tap="getDate()">确定</text>
				</view>
				<view class="citylist">
					<view @click="changesure(item.shortname,item.id,i)" v-for="(item,i) in citydata" :key="i" :class="i == activeIndex?'cityitem cityactive':'cityitem'">
						{{item.shortname}}
					</view>
				</view>
			</view>
		</view>
		<!-- 选择展会类型 -->
		<view class="bgs" v-if="pophy">
			<view class="sexPop">
				<view class="disFlex title">
					<text class="cansel" @tap="closeDatePop()">取消</text>
					<text class="word">选择展会类型</text>
					<text class="sure" @tap="getDate()">确定</text>
				</view>
				<view class="citylist">
					<view :class="i == hyIndex?'hyitem cityactive':'hyitem'" @tap="selhy(v,i)" v-for="(v,i) in hy" :key='i'>{{v.name}}</view>
				</view>
			</view>
		</view>
		<!--开口方向 -->
		<view class="bgs" v-if="popopen">
			<view class="sexPop">
				<view class="disFlex title">
					<text class="cansel" @tap="closeDatePop()">取消</text>
					<text class="word">选择展会类型</text>
					<text class="sure" @tap="getDate()">确定</text>
				</view>
				<view class="citylist">
					<view :class="i == openIndex?'hyitem cityactive':'hyitem'" @tap="selopen(v,i)" v-for="(v,i) in open" :key='i'>{{v.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {

			return {
				end:'',
				citydata:'',
				activeIndex:-1,
				hyIndex:-1,
				openIndex:-1,
				popDateStatus: false,
				pophy:false,
				popopen:false,
				city:'',
				hy:'',
				hyname:'',
				openname:'',
				imgs:[],
				open:[{id:1,name:'一面开口'},{id:2,name:'二面开口'},{id:3,name:'三面开口'},{id:4,name:'四面开口'}],
				updata:{
					deadline:'',
					city_id:'',
					industry_id:'',
					acreage:'',
					cost:'',
					open_type:'',
					content:'',
					img:'',
					phone:'',
					wx_number:'',
					name:'',
					id:''
				},
			}
		},
		onLoad() {
			this.getNowDate()
		},
		methods: {
			closeDatePop() {
				this.popDateStatus = false;
				this.pophy = false;
				this.popopen = false;
			},
			getDate() {
				this.popDateStatus = false;
				this.pophy = false;
				this.popopen = false;
			},
			changeBirth(e) {
				this.updata.deadline = e.detail.value;
			},
			choose() {
				this.popDateStatus = true;
				this.citydata = uni.getStorageSync('citydata')
			},
			choosehy() {
				this.pophy = true;
				this.http('/api/industry/index', 'post', {}, )
					.then((res) => {
						this.hy=res.data
					})
			},
			chooseopen() {
				this.popopen = true;
			},
			chooseImg(){
				let token = uni.getStorageSync('userinfo').token
				let user_id = uni.getStorageSync('userinfo').id
				uni.chooseImage({
					count: 9,
					success: res => {
						console.log(res)
						for(let i=0;i<res.tempFilePaths.length;i++){
							uni.uploadFile({
								url: 'https://admin.51zhandashi.com/api/common/upload_qiniu',
								filePath: res.tempFilePaths[i],
								name: 'upfile',
								formData:{
									token:token,
									user_id:user_id,
									filename:'upfile'
								},
								success: (e) => {
									let v=JSON.parse(e.data)
									console.log(v)
									if(v.sta==200){
										// this.user.headimgurl=res.data.url
										this.imgs.push(v.data.url)
									}
								}
											
							});
						}
					console.log(this.imgs)
					}
				})
			},
			del(i){
				this.imgs.splice(i,1)
			},
			changesure(v,id, i) {
				this.updata.city_id = id;
				this.city=v;
				this.activeIndex = i;
			},
			getNowDate () {
				let date = new Date();
				let year = date.getFullYear();
				let mouth = date.getMonth() + 1;
				if (mouth < 10) {
					mouth = '0' + mouth;
				}
				let day = date.getDate();
				if (day < 10) {
					day = '0' + day;
				}
				this.end = year+'-'+mouth+'-'+day;
			},
			
			selhy(v,i){
				this.updata.industry_id=v.id
				this.hyname=v.name;
				this.hyIndex = i;
			},
			selopen(v,i){
				this.updata.open_type=v.id
				this.openname=v.name;
				this.openIndex = i;
			},
			uprelease(){
				this.updata.token = uni.getStorageSync('userinfo').token
				this.updata.user_id = uni.getStorageSync('userinfo').id
				this.updata.img=this.imgs.toString(',')
				console.log(this.updata)
				this.http('/api/tender/save', 'post', this.updata, )
					.then((res) => {
						console.log(res)
						if(res.sta==200){
							this.getnav(this.router(`bidding`));
							uni.showToast({
								title: '发标成功',
								icon: 'none'
							})
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
			}
		}
	}
</script>

<style lang="less">
	.factory{
		padding-bottom: 150rpx;
		.maxBox{
			padding:0 40rpx;
			.box{
				height: 100rpx;
				
				.leftWord{
					font-size: 32rpx;
				}
				.rightWord{
					padding-right: 30rpx;
				}
			}
		}
		.rbox{
			padding: 40rpx;
			.title{
				font-size: 32rpx;
				font-weight:bold;
			}
			textarea{
				margin-top: 30rpx;
				padding: 24rpx;
				box-sizing: border-box;
				height: 240rpx;
				width: 100%;
				position: relative;
				border: 1rpx dashed #eee;
				border-radius:10rpx;
			}
			.imgCount{
				margin-top: 50rpx;
				font-weight: bold;
			}
			.imgs{
				margin-top: 30rpx;
				display: grid;
				grid-template-columns: repeat(3, 154rpx);
				grid-row-gap: 30rpx;
				grid-column-gap: 30rpx;
				.pic{
					width: 154rpx;
					height: 154rpx;
					position: relative;
					image{
						display: block;
						width: 154rpx;
						height: 154rpx;
					}
					.del{
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						top: -10rpx;
						right: -10rpx;
						z-index: 1;
					}
				}
				.camera{
					width: 154rpx;
					height: 154rpx;
					border: 1rpx dashed #eee;
					line-height: 154rpx;
					text-align: center;
					image{
						width: 56rpx;
						height: 56rpx;
					}
				}
			}
		}
		
		.bottom{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 90rpx;
			padding: 0 40rpx;
			z-index: 99;
			button{
				width: 100%;
				line-height: 90rpx;
				background:rgba(34,145,255,1) !important;
				border-radius:10rpx;
				color: #fff;
				font-size: 32rpx;
			}
		}
		.bgs {
			background: rgba(0, 0, 0, .3);
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 999;
		
			.sexPop {
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 99;
				width: 100%;
				height: 424rpx;
				padding: 0 32rpx;
				background-color: #fff;
		
				.psex {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					color: #999;
					justify-content: center;
				}
		
				.activeColor {
					color: #6894B9;
				}
		
				.title {
					padding: 24rpx 0;
		
					text {
						font-size: 36rpx;
					}
		
					.cansel {
						color: rgba(153, 153, 153, 1);
					}
		
					.word {
						font-weight: bold;
					}
		
					.sure {
						color: #6894B9;
					}
				}
		
				.timeBox {
					padding: 32rpx 0;
		
					.left {
						color: #333;
						font-size: 32rpx;
					}
		
					.right {
						.time {
							color: #333;
							font-size: 32rpx;
						}
		
						.iconfont {
							font-weight: bold;
							margin-left: 10rpx;
							font-size: 28rpx;
						}
					}
				}
			}
		}
		.citylist {
			display: flex;
			flex-wrap: wrap;
		
			.cityitem {
				width: 100rpx;
				height: 40rpx;
				font-size: 24rpx;
				line-height: 40rpx;
				background-color: #f1f1f1;
				border-radius: 10px;
				color: #666;
				line-height: 40rpx;
				text-align: center;
				margin: 8rpx;
			}
			.hyitem{
				width: 204rpx;
				height: 50rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				background-color: #f1f1f1;
				border-radius: 10px;
				color: #666;
				line-height: 50rpx;
				text-align: center;
				margin: 13rpx;
			}
			.cityactive {
				background-color: #2291FF !important;
				color: #fff;
			}
		}
	}
</style>
